<template>
  <div class="yingmoo-membernav">
    <header class="header">
      <p @click="currIndex=1,curr=0,setcurrIndex(1)">
        <span class="header-left">
          <router-link tag="span" to="/"><img src="../assets/ym-member/home.png" /> 鹰目网首页</router-link>
          <span class="register">
            <font color="red">
              <span class="name" v-if="user.contentUser != null">Hi,<i>{{user.contentUser}}</i></span>
              <span class="name" v-else-if="user.contentEmail != null">Hi,<i>{{user.contentUser}}</i></span>
              <span class="name" v-else-if="user.contentMobile != null">Hi,<i>{{user.contentMobile}}</i></span>
            </font>
            <img src="../assets/ym-header/arrows.png" />
          </span>

          <span class="out" style="cursor: pointer;">
            <span v-if="flag" @click="confirmExit">退出</span>
            <span v-if="!flag" >
              <router-link tag="span" :class="{'router-link-exact-active': $route.name=='ymEnroll'}" to="/ymEnroll" class="enroll">免费注册</router-link>        		
            </span>
          </span>
        </span>
        <span class="member">会员中心</span>
<!--
        <router-link class="sever" tag="span" to="/ymMemberneedlist">我的需求</router-link><img src="../assets/ym-header/arrows.png" />
        <router-link class="sever" tag="span" to="/ymMemberorder">我的订单</router-link><img src="../assets/ym-header/arrows.png" />
        <router-link class="sever" tag="span" to="/ymAttentionmedia">关注中心</router-link><img src="../assets/ym-header/arrows.png" />
        <router-link class="sever" tag="span" v-if="user.shop != 0" to="/ymMemberstore">店铺管理</router-link><img src="../assets/ym-header/arrows.png" />
-->
        <span class="tel">客服热线</span>
        <span class="num">
			    <img src="../assets/ym-header/phone.png" class="tel_img" />400 650 7893</span>
      </p>
    </header>
    <div class="yingmoo-memberbanner">
      <div class="nav">
        <div class="yingmoo-logo">
          <router-link tag="div" to="/"><img src="../assets/ym-member/yingmoo-logo.png" /></router-link>
          <p>广告主中心</p>
        </div>
        <p class="account">
          <!--
          <span @click="curr=4,setcurr(4)">
            <router-link tag="span" to="/ymMemberaccount">账户管理
              <img src="../assets/ym-member/selice.png" />
            </router-link>
          </span>
          <span @click="curr=0,setcurr(0)">
            <router-link tag="span" to="/yminformation">消息</router-link>
          </span>
          -->
        </p>
        <div class="search">
          <input type="text" class="ipt" v-model="params.key"/>
          <div class="seek" @click="search">搜索</div>
        </div>
        <router-link tag="p" to="/ymShoppingcart" class="settle">
          <img src="../assets/ym-member/car.png" /> 购物车结算
          <img src="../assets/ym-member/right.png" />
        </router-link>
      </div>
    </div>
    <div class="membernav">
      <ul class="nav">
        <li :style='{"border-bottom":curr==1? "2px solid #1075bb" :""}' @click="curr=1,setcurr(1)"><router-link tag="li" to="/ymMemberdefault">首页</router-link></li>
        <li :style='{"border-bottom":curr==2? "2px solid #1075bb" :""}' @click="curr=2,setcurr(2)" v-if="user.shop!=0"><router-link tag="li" to="/ymMemberstore">店铺管理</router-link></li>
        <li :style='{"border-bottom":curr==3? "2px solid #1075bb" :""}' @click="curr=3,setcurr(3)"><router-link tag="li" to="/ymMemberorder">订单中心</router-link></li>
        <li :style='{"border-bottom":curr==4? "2px solid #1075bb" :""}' @click="curr=4,setcurr(4)"><router-link tag="li" to="/ymMemberaccount">账户管理</router-link></li>
        <li :style='{"border-bottom":curr==5? "2px solid #1075bb" :""}' @click="curr=5,setcurr(5)"><router-link tag="li" to="/ymMemberneedlist">需求中心</router-link></li>
        <li :style='{"border-bottom":curr==6? "2px solid #1075bb" :""}' @click="curr=6,setcurr(6)"><router-link tag="li" to="/ymAttentionmedia">关注中心</router-link></li>
        <li :style='{"border-bottom":curr==7? "2px solid #1075bb" :""}' @click="curr=7,setcurr(7)"><router-link tag="li" to="/ymMembermyerror">我的检错</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "yingmoo-membernav",
  data() {
    return {
      user: {},
      flag: false,
      curr: 1,
      params: {
        key: "",
        categoryCode: "",
        mediaArea: ""
      }
    };
  },
  mounted() {
    this.getUser();
  },
  methods: {
    search: function() {
      window.sessionStorage.setItem("params", JSON.stringify(this.params));
      window.location.href = "../#/ymList";
    },
    getUser: function() {
      var data = localStorage.getItem("user");
      if (data != null) {
        this.user = JSON.parse(localStorage.getItem("user"));
        this.flag = true;
      } else {
        this.flag = false;
      }
    },
    confirmExit: function() {
      if (confirm("您确认要退出吗？")) {
        localStorage.clear();
        window.location.href = "../#/";
        this.user = {};
        this.flag = false;
      }
    },
    setcurr: function(are) {
      console.log(are);
      window.sessionStorage.removeItem("index");
      if (are == 0) {
        window.sessionStorage.removeItem("are");
      } else {
        window.sessionStorage.setItem("are", are);
        console.log(are);
      }
    },
    getcurr: function() {
      this.curr = window.sessionStorage.getItem("are");
      console.log(sessionStorage.getItem("are"));
    },
    setcurrIndex: function(index) {
      if (index == 7) {
        window.sessionStorage.removeItem("index");
      } else {
        window.sessionStorage.setItem("index", index);
        window.sessionStorage.removeItem("ear");
      }
      //        console.log(index)
    },
    getcurrIndex: function() {
      this.currIndex = window.sessionStorage.getItem("index");
      console.log(sessionStorage.getItem("index"));
    }
  }
};
</script>

<style scoped lang="less">
.yingmoo-membernav {
  width: 100%;
  .header {
    width: 100%;
    height: 45px;
    background-color: #e6e6e6;
    p {
      width: 1200px;
      margin: 0 auto;
      line-height: 45px;
      font-size: 14px;
      color: #666666;
      span {
        cursor: pointer;
        margin-left: 7px;
      }
      .header-left {
        display: inline-block;
        width: 327px;
        span {
          cursor: pointer;
          margin-left: 7px;
        }
        .name {
          width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: inline-block;
          float: left;
          margin-right: 10px;
        }
        .out {
          color: #f29600;
          margin-left: 8px;
        }
        .register {
          margin-left: 40px;
        }
      }
      .member {
        margin-left: 180px;
        padding: 0 5px 1px 5px;
        width: 99px;
        height: 22px;
        background-color: #f29600;
        color: white;
      }
      img {
        padding-left: 5px;
      }
      .tel {
        margin-left: 399px;
      }
      .tel_img {
        padding-left: 5px;
        padding-right: 5px;
      }
      .num {
        font-weight: bold;
        color: #f29600;
      }
    }
  }
  .yingmoo-memberbanner {
    width: 100%;
    height: 62px;
    background-color: #036eb7;
    .nav {
      width: 1200px;
      height: 62px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .yingmoo-logo {
        width: 252px;
        height: 43px;
        display: flex;
        justify-content: space-between;
        p {
          color: #6998d4;
          font-size: 14px;
          line-height: 43px;
        }
      }
      .account {
        color: #dddddd;
        font-size: 15px;
        span {
          margin-left: 30px;
          cursor: pointer;
          img {
            margin-left: 5px;
          }
        }
      }
      .search {
        width: 300px;
        height: 32px;
        display: flex;
        .ipt {
          width: 242px;
          height: 30px;
          border: none;
          outline: none;
          font-size: 14px;
          padding-left: 10px;
        }
        .seek {
          width: 58px;
          height: 100%;
          line-height: 33px;
          text-align: center;
          background-color: #f29600;
          color: white;
          font-size: 14px;
        }
      }
      .settle {
        color: white;
        font-size: 14px;
        cursor: pointer;
      }
    }
  }
  .membernav {
    height: 46px;
    width: 100%;
    background-color: white;
    .nav {
      height: 46px;
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      line-height: 46px;
      color: #333333;
      font-size: 16px;
      text-align: center;
      li {
        width: 126px;
        height: 46px;
        cursor: pointer;
        &:hover {
          border-bottom: 2px solid #1075bb;
          box-sizing: border-box;
        }
      }
    }
    .red {
      color: red;
    }
    .sever {
      margin-left: 5px;
      cursor: pointer;
    }
  }
}
</style>
